<template>
	<div class="channel-edit">
		<van-cell center :border="false">
			<div slot="title" class="channel-title">我的频道</div>
			<van-button type="danger" plain round size="mini" class="bj" @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑' }}</van-button>
		</van-cell>
		<van-grid :gutter="10">
		  <van-grid-item v-for="(value,index) in userChannels" :key="index" :text="value.name" 
			:icon="isEdit && index !== 0 ? 'clear' : ''" class="grid-item" @click="onUserChannelClick(value,index)"
			 :class="{active: index === active}"
			 />
		</van-grid>
		
		<van-cell center :border="false">
			<div slot="title" class="channel-title">频道推荐</div>
			
		</van-cell>
		<van-grid :gutter="10">
		  <van-grid-item  class="grid-item" v-for="(item,index) in recommandChannels" :key="index" :text="item.name"
			@click="onAdd(item)"
			/>
		</van-grid>
	</div>
</template>

<script>
	import { getAllChannels,appUserChannel,deleUserChannel} from '../../../utils/user.js'
	import { mapState } from 'vuex'
	import { setItem } from '../../../utils/storage.js'
	
	export default {
		name: 'ChannelEdit',
		props:{
			userChannels: {
				type:Array,
				required:true
			},
			active: {
				type:Number,
				required:true
			}
		},
		data() {
			return {
				allChannels: [],
				isEdit:false
			}
		},
		created() {
			this.loadAllChannels()
		},
		methods: {
			async loadAllChannels() {
				const { data } = await getAllChannels()
				this.allChannels = data.data.channels
			},
			//添加频道
			async onAdd(item) {
				this.userChannels.push(item)
				//数据持久化
				if(this.user) {
					//登录了，数据存储到线上
					await appUserChannel({
						channels:[
							{ id: item.id, seq: this.userChannels.length}
						]
					})
				}else {
					//没有登录，数据存储到本地
					setItem('user-channels',this.userChannels)
				}
			}	,		
			//编辑频道
			 onUserChannelClick(value,index) {
				if(this.isEdit) {
					//编辑状态，删除频道
					if(index <= this.active) {
						this.$emit('update-active',this.active - 1)
					}
					this.userChannels.splice(index,1)
				}else {
					//非编辑状态，切换频道
					this.$emit('close')
					this.$emit('update-active',index)
				}
				
				//数据持久化
				if(this.user) {
					
				}else {
					setItem('user-channels',this.userChannels)
				}
			}
		},
		computed: {
			...mapState(['user']),
			//推荐频道列表
			recommandChannels() {
				return this.allChannels.filter(channel => {
					return !this.userChannels.find(userChannel => {
						return userChannel.id === channel.id
					})
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.channel-edit {
		padding-top: 54px;
		}
	.channel-title {
		font-size: 16px;
		color: #333333;
	}
	.grid-item {
		width: 80px;
		height: 43px;
		margin-top: 10px;
		}
	/deep/ .van-grid-item__content {
		background-color: #f4f5f6;
		
	}
	.van-grid-item__text {
		font-size: 14px;
		color: #222;
		margin-top: 0;
	}
	.bj {
		padding: 0 10px;
	}
	/deep/.van-grid-item__icon {
		position: absolute;
		right: -10px;
		top: -5px;
		font-size: 20px;
		color: #ccc;
	}
	/deep/.active {
		color: red !important;
	}
	/deep/.active .van-grid-item__text {
		color: red !important;
	}
	
	
</style>
